<template>
    <div>
        <el-form :inline="true" :model="studentSearchForm" class="demo-form-inline">
                <el-form-item label="姓名">
                    <el-input v-model="studentSearchForm.name" placeholder="姓名"></el-input>
                </el-form-item>
                <el-form-item label="年龄">
                    <el-input v-model="studentSearchForm.age" placeholder="年龄"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" @click="initTable">搜索</el-button>
                    <el-button  type="danger" @click="batchDelete" >批量删除</el-button>
                </el-form-item>
            </el-form>
            <!-- :data 引入vue中的变量tableData 必须为数组类型 -->
            <el-table
                    :data="tableData"
                    stripe
                    @selection-change="handleSelectionChange"
                    style="width: 100%">

                <!--复选框-->
                <el-table-column
                        type="selection"
                        width="30">
                </el-table-column>


                <el-table-column
                        prop="sid"
                        label="学生编号"
                        width="100">
                </el-table-column>
                <el-table-column
                        prop="name"
                        label="学生姓名"
                        width="100">
                </el-table-column>
                <el-table-column
                        prop="age"
                        label="年龄"
                        width="100">
                </el-table-column>
                <el-table-column
                        prop="class1.cname"
                        label="班级名称"
                        width="100">
                </el-table-column>

                <el-table-column
                        fixed="right"
                        label="操作">
                    <template slot-scope="scope">
                        <el-button type="success" plain class="el-icon-plus" @click="insetStudent(scope.row)" >添加</el-button>
                        <el-button type="success" class="el-icon-edit" plain @click="editStudent(scope.row)" >编辑</el-button>
                        <el-button type="danger" class="el-icon-delete" plain @click="del(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>


            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[5, 10, 15, 20,25,30]"
                    :page-size="5"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>

            <!--添加对话框-->
            <el-dialog
                    title="添加学生"
                    :visible.sync="dialogVisible2"
                    width="30%">

                <el-form ref="form" :model="insertStudentForm" label-width="80px">
                    <el-form-item label="姓名">
                        <el-input v-model="insertStudentForm.name"></el-input>
                    </el-form-item>
                    <el-form-item label="年龄">
                        <el-input v-model="insertStudentForm.age"></el-input>
                    </el-form-item>
                    <el-form-item label="班级名称">
                        <el-select v-model="insertStudentForm.cid" placeholder="请选择">
                            <!--班级下拉框
                                classes:班级
                                :label 显示的字段 班级名称
                            -->
                            <el-option
                                    v-for="item in classes"
                                    :key="item.cid"
                                    :label="item.cname"
                                    :value="item.cid">
                            </el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item size="large">
                        <el-button type="primary" @click="insertStudents">添加</el-button>
                        <el-button @click="dialogVisible2=false">取消</el-button>
                    </el-form-item>
                </el-form>
            </el-dialog>

            <!--编辑对话框
                dialogVisible：对话框的显示和隐藏
            -->
            <el-dialog
                    title="修改"
                    :visible.sync="dialogVisible"
                    width="30%">

                <el-form ref="form" :model="editStudentForm" label-width="80px">
                    <el-form-item label="姓名">
                        <el-input v-model="editStudentForm.name"></el-input>
                    </el-form-item>
                    <el-form-item label="年龄">
                        <el-input v-model="editStudentForm.age"></el-input>
                    </el-form-item>
                    <el-form-item label="班级名称">
                        <el-select v-model="editStudentForm.cid" placeholder="请选择">
                            <!--班级下拉框
                                classes:班级
                                :label 显示的字段 班级名称
                            -->
                            <el-option
                                    v-for="item in classes"
                                    :key="item.cid"
                                    :label="item.cname"
                                    :value="item.cid">
                            </el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item size="large">
                        <el-button type="primary" @click="updateStudent">确认修改</el-button>
                        <el-button @click="dialogVisible=false">取消</el-button>
                    </el-form-item>
                </el-form>
            </el-dialog>
        </div>

</template>

        <script>
            export default {
                name: "Student",
                data() {
                    return {

                        dialogVisible: false,
                        dialogVisible2: false,
                        studentSearchForm: {},
                        tableData: [],
                        currentPage: 1,
                        pageSize: 5,
                        total: 0,
                        classes: [],
                        editStudentForm: {},
                        multipleSelection: [],
                        ids: [],
                        insertStudentForm: {}
                    }
                },

                //页面加载完毕后执行的方法
                created() {
                    this.initTable();
                    //查询所有班级
                    this.loadAllClass();
                },
                methods: {
                    //获取表格中选中的项
                    handleSelectionChange(val) {
                        this.multipleSelection = val;
                        console.log(this.multipleSelection);
                    },
                    //确认修改员工信息
                    updateStudent() {
                        axios.put("http://localhost:8080/student/updateStudent/", this.editStudentForm).then(result => {
                            //console.log(result)
                            if (result.data.code === 200) {
                                this.$message.success(result.data.msg);
                                //关闭对话框
                                this.dialogVisible = false;
                                //刷新页面
                                this.initTable();
                            }
                        })
                    },
                    //添加员工信息
                    insertStudents() {
                        axios.put("http://localhost:8080/student/saveStudent/", this.insertStudentForm).then(result => {
                            if (result.data.code === 200) {
                                this.$message.success(result.data.msg);
                                //关闭对话框
                                this.dialogVisible2 = false;
                                //刷新页面
                                this.initTable();
                            }
                        })
                    },

                    //批量删除
                    batchDelete() {
                        /*//stream
                        this.ids = this.multipleSelection.map(item=>item.sid);*/
                        axios.post("http://localhost:8080/student/batchDelete", this.multipleSelection).then(result => {
                            if (result.data.code === 200) {
                                this.$message.success(result.data.msg);
                                //刷新页面
                                this.initTable();
                            }
                        })
                    },

                    loadAllClass() {
                        axios.get("http://localhost:8080/classes/findAll/").then(result => {
                            console.log(result);
                            this.classes = result.data.data;
                        })

                    },
                    initTable() {
                        axios.post("http://localhost:8080/student/findAll/" + this.currentPage + "/" + this.pageSize, this.studentSearchForm).then(result => {
                            this.tableData = result.data.data.data.records;
                            this.total = result.data.data.total;
                        })
                    },
                    //改变每页的条数时 触发该事件
                    handleSizeChange(val) {
                        console.log(`每页 ${val} 条`);
                        this.pageSize = val;
                        this.initTable();
                    },
                    //改变当前页时 触发该事件
                    handleCurrentChange(val) {
                        console.log(`当前页: ${val}`);
                        this.currentPage = val;
                        this.initTable();
                    },
                    //删除员工
                    del(row) {
                        //拿到一行数据
                        //console.log(row)
                        let sid = row.sid;
                        axios.delete("http://localhost:8080/student/deleteStudent/" + sid).then(result => {
                            //console.log(result)
                            if (result.data.code === 200) {
                                this.$message.success(result.data.msg)
                                this.initTable();
                            }
                        })
                    },
                    //编辑学生信息
                    editStudent(row) {
                        this.dialogVisible = true;
                        this.editStudentForm = row;
                    },
                    //添加学生信息
                    insetStudent() {
                        this.dialogVisible2 = true;
                    }

                }
            }
            </script>